define(function (require, exports, module) {
    //热点
    function Hot() {
        this.aDots = document.getElementsByClassName("dot");
        this.one=document.querySelector('#banner');
        this.two=document.querySelector('#one');
        this.three=document.querySelector('#two');
        this.four=document.querySelector('#four');
        this.init();
        this.initEvents();
    }
    Hot.prototype={
        init:function () {
            this.addViewportEvent();
        },
        initEvents:function () {
            var d=this.debounce(100,this.addViewportEvent);
            var t=this.throttle(1000,this.addViewportEvent)
            document.addEventListener('scroll',function () {
                d();
            });
            window.addEventListener('resize',function () {
                t();
            });
        },

        addViewportEvent:function () {
            var oneFlag=this.isElementInViewport(this.one);
            var twoFlag=this.isElementInViewport(this.two);
            var threeFlag=this.isElementInViewport(this.three);
            var fourFlag=this.isElementInViewport(this.four);
            if(document.querySelector('#dots .active')!=null){
                document.querySelector('#dots .active').className="dot";
            }
            if(oneFlag){
                this.aDots[0].className="dot active";
                return;
            }
            if(twoFlag){
                this.aDots[1].className="dot active";
                return;
            }
            if(threeFlag){
                this.aDots[2].className="dot active";
                this.pauseVideo();
                return;
            }
            if(fourFlag){
                this.aDots[3].className="dot active";
                this.addVieo();
                return;
            }
        },
        //是否在可视区域
        isElementInViewport:function (el) {
            var rect=el.getBoundingClientRect();
            var bt=rect.bottom+1;
            return (rect.top<(window.innerHeight||document.documentElement.clientHeight)&&
            bt>=(window.innerHeight||document.documentElement.clientHeight));
        },
        //添加视频
        addVieo:function () {
            var autoplay="";//是否自动播放
            if(document.body.clientWidth>768) {//大于768为pc设备
                autoplay="autoplay";
            }
            if(!document.querySelector('#myVideo')){
                var text="<video webkit-playsinline='true' playsinline='true' x-webkit-airplay='deny' controls preload='auto'  id='myVideo' poster='images/vid_cover.png'  "+autoplay+">"+
                    "<source src='assets/video/stylist.mp4' type='video/mp4'>"+
                    "您的浏览器不支持H5"+
                    "</video>";
                document.getElementById("videoArea").innerHTML=text;
            }
            if(document.querySelector('#myVideo')&&document.body.clientWidth>768){
                var myVideo=document.querySelector('#myVideo');
                var isPaused=myVideo.paused;
                if(isPaused){
                    myVideo.play();
                }
            }
        },
        //暂停视频
        pauseVideo:function () {
            if(document.querySelector('#myVideo')&&document.body.clientWidth>768){
                var myVideo=document.querySelector('#myVideo');
                var isPaused=myVideo.paused;
                if(!isPaused){
                    myVideo.pause();
                }
            }
        },
        /***
         * 防抖
         * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 idle，action 才会执行
         * @param idle 空闲时间
         * @param action 请求关联函数，实际应用需要调用的函数
         * @returns {Function}  返回客户调用函数
         */
        debounce:function (idle, action) {
            var last,self=this;
            return function(){
                var args = arguments;
                clearTimeout(last);
                last = setTimeout(function(){
                    action.apply(self, args);
                }, idle)
            }
        },
        /***
         * 节流阀
         * 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay
         * @delay  延迟时间，单位毫秒
         * @param action {function}  请求关联函数，实际应用需要调用的函数
         * @return {function}    返回客户调用函数
         * */
        throttle:function (delay,action) {
            var last=0,self=this;
            return function () {
                var curr=new Date();
                if(curr-last>delay){
                    action.apply(self,arguments);
                    last=curr;
                }
            }
        }
    }

    window.onload=function () {
        new Hot();
    }


});
